<template>
  <div>
    <h2>门店添加</h2>

    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><span style="color: red">*</span>店名</td>
          <td>
            <input type="text" v-model="form.dname" />
          </td>
        </tr>
        <tr>
          <td>营业时间</td>
          <td>
            <input type="time" v-model="form.yshijian" />
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>服务范围</td>
          <td>
            <select v-model="form.fanwei">
              <option value="">请选择</option>
              <option>早餐早点</option>
              <option>饮料</option>
            </select>
          </td>
        </tr>

        <tr>
          <td>店主</td>
          <td>
            <input type="text" v-model="form.dianzhu" />
          </td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td>
            <input type="text" v-model="form.phone" />
          </td>
        </tr>
        <tr>
          <td>门店介绍</td>
          <td>
            <textarea v-model="form.jieshao"> </textarea>
          </td>
        </tr>
        <tr>
          <td>门店地址</td>
          <td>
            <select v-model="form.dizhi">
              <option value="">请选择</option>
              <option>昌平区</option>
              <option>海淀区</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>状态</td>
          <td>
            <input
              type="radio"
              v-model="form.zhuangtai"
              name="zhaungtai"
              checked
            />启用
            <input type="radio" v-model="form.zhuangtai" name="zhaungtai" />禁用
          </td>
        </tr>

        <tr>
          <td>图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="Add">添加门店</button>
            <a @click="Ad"><span style="color: aliceblue">.</span> </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import "bootstrap/dist/css/bootstrap.min.css";

const router = useRouter();

const form = reactive({
  id: "",
  name: "",
  pwd: "",
  dname: "",
  yshijian: "",
  fanwei: "",
  dianzhu: "",
  phone: "",
  jieshao: "",
  dizhi: "",
  zhuangtai: "",
  tupian: "",
  sdata: true,
});

const Add=()=>{
    if(!form.dname){
        alert("门店名称不能为空");
        return;
    }
    if(!form.dianzhu){
        alert("店主不能为空");
        return;
    }
            alert("添加成功")
     
            router.push("showmen");
}



const Tupian=(e:any)=>{
    var formdata=new FormData();
    var file=e.target.files[0];
    formdata.append("file",file);
    axios.post("https://localhost:7140/api/gonggao",formdata).then(res=>{
        form.tupian=res.data;
    })
}


</script>

<style scoped></style>
